<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>Title</title>
    <style>
        header {
            position: fixed;
            height: 80px;
            width: 50%;
            background: rgba(226, 48, 48, 0.3);
            backdrop-filter: blur(5px); /*主要实现的属性*/
            /*filter: blur(5px);*/
            top: 0;
            left: 0;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/mobile-detect/1.4.5/mobile-detect.min.js"></script>
</head>
<body>
<!--向下穿透的模糊层-->
<header>header</header>

<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
<h1>标题标题标题</h1>
<div>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>

<div class="parent">
    <div>跑马灯</div>
    <video src=""></video>
</div>
<script>
  let md = new MobileDetect(navigator.userAgent);
  console.log(md.mobile()); // 'Sony'
  console.log(md.phone()); // 'Sony'
  console.log(md.tablet()); // null
  console.log(md.userAgent()); // 'Safari'
  console.log(md.os()); // 'AndroidOS'
  console.log(md.is("iPhone")); // false
  console.log(md.is("bot")); // false
  console.log(md.version("Webkit")); // 534.3
  console.log(md.versionStr(md.phone())); // '4.1.A.0.562'
  console.log(md.match("playstation|xbox")); // false

  if (str.indexOf("pika_webview") !== -1) {
    console.log(true);
    let pikaver = str.match(/pika_webview\/((\d+)\.(\d+)\.?(\d+))?/i);
    console.log("os", "pika_webview");
    console.log("version", pikaver[1]);
  }


</script>
</body>
</html>
